<template>
	<view class="root">
		<view
			class="fd-row bgc-fff br-20 ai-center"
			:style="{ padding: `26rpx 20rpx`, margin: `46rpx 20rpx 0` }"
		>
			<image class="width-66 height-66" src="/static/img/icon-address.png" mode="aspectFit" />
			<view class="f1 ml-30">
				<label>
					<text class="color-333 fs-32 fw-700">{{ orderInfo.truename || "" }}</text>
					<text class="color-999 fs-24 ml-12 f1">
						{{ orderInfo.address_mobile || "" }}
					</text>
				</label>
				<text class="mt-18 fs-28 color-333">
					{{ orderInfo.address || "" }} {{ orderInfo.address_name || "" }}
				</text>
			</view>
		</view>

		<view class="bgc-fff br-20" :style="{ margin: `33rpx 20rpx 0` }">
			<view
				v-for="(option, key) in model"
				:key="key"
				class="fd-row"
				:style="{ padding: `26rpx 20rpx` }"
			>
				<text class="fs-30 fw-700 color-333">{{ option.title }}：</text>

				<input
					class="fs-28 input f1 height-100percent ml-32"
					placeholder="暂无数据"
					:disabled="option.disabled"
					v-model="option.value"
					placeholder-class="color-ccc"
				/>
			</view>
		</view>

		<view :style="{ margin: `55rpx 30rpx 0` }">
			<label class="remarks color-333 fw-700 fs-30">备注</label>

			<textarea
				:style="{ padding: `24rpx 30rpx`, height: `200rpx` }"
				class="bgc-fff mt-12 br-20 fs-28 width-auto"
				placeholder="暂无数据"
				:disabled="true"
				:value="orderInfo.desc"
				placeholder-class="color-ccc"
			/>
			<text v-if="orderInfo.confirm" class="mt-18 fs-28 color-333">
				{{ orderInfo.confirm_msg }}
				确认修改后数量：{{ orderInfo.confirm_num }}
			</text>
		</view>

		<button
			class="br-20 bgc-2e54fd color-fff fs-34 fw-600 lh-3"
			:style="{ margin: `98rpx 20rpx` }"
			hover-class="tap-hover"
			:disabled="!orderInfo.status || orderInfo.status >= 6"
			@click="confirm"
		>
			{{ orderInfo.confirm ? "确认修改" : orderInfo.status_cn || "--" }}
		</button>

		<view class="mt-30 ml-30 mr-30 mb-88">
			<button
				v-if="orderInfo.identity === 2"
				@click="printOrder"
				:style="{ textDecoration: `underline` }"
				class="color-2e54fd fs-32 fw-700 border-none"
				hover-class="tap-hover"
				:plain="true"
			>
				打印订单
			</button>
			<image
				:style="{ width: `300rpx`, height: `300rpx` }"
				class="as-center"
				:src="orderInfo.qrcode"
				mode="aspectFit"
			/>

			<view v-if="orderInfo.deal_list.length" class="mt-30">
				<text class="fs-30 fw-700 color-333">操作记录</text>

				<view v-for="(log, index) in orderInfo.deal_list" :key="index" class="mt-20 fs-28">
					<text class="color-666 fw-500">{{ log.add_time }}</text>
					<text class="color-999">{{ log.desc }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";

	@Component
	export default class OrderDetail extends Vue {
		// component property
		orderInfo: AnyObject = {};
		get model(): AnyObject {
			const { orderInfo } = this;
			return {
				sn: {
					title: "产品料号",
					value: orderInfo.title,
					disabled: true,
				},
				number: {
					title: "产品数量",
					value: orderInfo.number,
					disabled: !(orderInfo.identity === 2 && [1, 4].includes(orderInfo.status)),
				},
				returnNumber: {
					title: "返程数量",
					value: orderInfo.chang_push_num,
					disabled: !(
						orderInfo.identity === 2 &&
						[4, 5].includes(orderInfo.status) &&
						orderInfo.chang_push_num < orderInfo.number
					),
				},
				receiveNumber: {
					title: "客户已接收",
					value: orderInfo.kehu_receive_num,
					disabled: true,
				},
				specifications: {
					title: "产品规格",
					value: orderInfo.spec,
					disabled: true,
				},
				thickness: {
					title: "实际铜厚",
					value: orderInfo.tonghou,
					disabled: true,
				},
				requirements: {
					title: "生产要求",
					value: orderInfo.gongxu,
					disabled: true,
				},
				time: {
					title: "时间要求",
					value: orderInfo.time,
					disabled: true,
				},
			};
		}

		onLoad({ order_id }: AnyObject) {
			uni.showLoading({ title: "Loading..." });
			this.$request.get("/orderInfo", { order_id }).then(({ data }) => {
				this.orderInfo = data;
				uni.hideLoading();
			});
		}

		async confirm() {
			const { $request, orderInfo } = this;
			if (orderInfo.status >= 6) return;

			let title = orderInfo.confirm
				? (
						await $request.get("/confirmOrder", {
							order_id: orderInfo.order_id,
						})
				  ).msg
				: (
						await $request.get("/changeOrderStatus", {
							order_id: orderInfo.order_id,
							number: this.model.number.value,
							chang_push_num: this.model.returnNumber.value,
						})
				  ).msg;

			uni.showToast({ title, icon: "none" });
		}

		printOrder() {
			if (this.orderInfo.identity !== 2) return;
			uni.showLoading({ title: "Loading..." });
			this.$request
				.get("feie_print", { order_id: this.orderInfo.order_id })
				.then(({ msg: title }) => uni.showToast({ title }));
		}
	}
</script>

<style lang="scss" scoped>
	// scss
	button[disabled] {
		opacity: 0.3;
		color: #fff;
		background-color: #4a7cee;
	}
	.remarks {
		&::before {
			content: "";
			width: 20rpx;
			height: 20rpx;
			background-color: #4a7cee;
			border-radius: 50%;
			margin-right: 8rpx;
		}
	}
</style>